<template>
  <div id="panel">
    <div class="panel-head-1">
      <ul>
        <li v-for="item in headTitle" :key="item" :title="item">{{ item }}</li>
      </ul>
    </div>

    <div ref="Body" class="panel-body-1">
      <div
        :style="styles"
        @mouseenter="destroyed"
        @mouseleave="init"
        class="panel-body-1-1"
        ref="subBody"
      >
        <ul v-for="(item, index) in newContent" :key="index">
          <li
            v-for="(subItem, subIndex) in item"
            :key="subIndex"
            :title="subItem"
          >
            {{ subItem }}
          </li>
        </ul>
        <ul
          v-for="(item, index) in newContent.slice(0, count)"
          :key="index + 'copy'"
        >
          <li
            v-for="(subItem, subIndex) in item"
            :key="subIndex + 'copy'"
            :title="subItem"
          >
            {{ subItem }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// 设置表格行高
import { count } from "../../assets/js/getCount.js";
const regNumber = /^\d+$/;
export default {
  props: {
    headTitle: {
      // type: Array,
      default: () => {
        return [];
      },
    },
    content: {
      // type: Array,
      default: () => {
        return [];
      },
    },

    // 减数
    subNum: {
      type: Number,
      default: 0,
    },
    //  自动播放时间（毫秒）
    autoplay: {
      validator(val) {
        return regNumber.test(val);
      },
      default: 3000,
    },
    //  切换速度（毫秒）
    speed: {
      validator(val) {
        return regNumber.test(val);
      },
      default: 500,
    },
  },
  components: {},
  data() {
    return {
      indexMq: 0,
      timer: null,
      num: 0,
      count: 7,
      // 运动
      styles: {
        top: 0,
        transitionDuration: 0,
      },
      height: 0,
      newContent:[],
    };
  },
  watch: {
    newContent:function(){
        this.$nextTick(() => {
          this.count = count;
          this.$refs.subBody.style.lineHeight = (this.$refs.Body.offsetHeight / count) +'px'
          this.height = this.$refs.Body.offsetHeight;
          this.init();
        });
      
    },
  },
  created() {
    this.newContent = this.content;
  },
  mounted() {},
  updated() {},
  computed: {
    lenMq() {
      return this.content ? this.content.length : 0;
    },
  },
  methods: {
    setTop(speed, top) {
      this.styles.transitionDuration = speed + "ms";
      this.styles.top = top + "px";
    },
    init() {
      this.$nextTick(() => {
        this.timer = setInterval(() => {
          this.setTop(
            this.speed,
            -(++this.indexMq * (this.height / this.count))
          );
          if (this.indexMq >= this.lenMq) {
            // 若当前是新1(最後一個)，
            setTimeout(() => {
              // 瞬间回到老1（第一个）
              this.indexMq = 0;
              this.setTop(0, 0);
            }, this.speed);
          }
        }, this.autoplay);
      });
    },
    destroyed() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>
<style lang="less" scoped>
#panel {
  height: 100%;
}
</style>
